<template>
	<view>
		<view class="header">
			<view class="searchBox">
				<image src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%9D%9E%E7%BF%94%E6%B4%BB%E5%8A%A8/u1817.png"></image>
				<form bindconfirm="toSearch" >
					<input placeholder="搜索课程/头条/活动" v-model="values" @confirm="toSearch" confirm-type="search"/>
				</form>
			</view>
			<!-- <button @click="toSearch" style="width: 20rpx;height: 40rpx;font-size: 20rpx;">搜索</button> -->
			<navigator url="" delta="1" open-type="navigateBack" class="searchBtn">
			    <text >取消</text>
			</navigator>
		</view>
		<!-- 搜索页面 -->
		<view v-show="search1Visible">
			<search1></search1>
		</view>
		<!-- 有、无结果 -->
		<view v-show="search2Visible">
			<search2 :data1='courseData' :data2='headlinesData' :data3="flyData"></search2>
		</view>
	</view>
</template>

<script lang="ts" setup>
import http from '@/utils/http.js';
import search1 from '@/components/search1/search1.vue';
import search2 from '@/components/search2/search2.vue';
import {ref,onMounted,defineProps} from 'vue';

//搜索
let search1Visible=ref(true);
let search2Visible=ref(false);
let values=ref('')
let courseData=ref([])
let headlinesData=ref([])
let flyData=ref([])
let page=ref(1)
let limit=ref(5)
let total=ref(0)
//搜索课程
let toSearch=function(){
	//搜索课程
		http({
			url:'/course/list/terms',
			method:'get',
			params: {
				page: page.value,
				limit: limit.value,
				courses:values.value
				}
		}).then((data)=>{
			console.log(data.data.list)
			if (data.code == 0) {
				
				courseData.value=data.data.list
				console.log(courseData.value,666);
				
				// tableData.value= data.data.list
				//console.log(tableData)
				// total.value = data.data.totalCount
				//console.log(total.value)
			}
		})	
		//搜索教育头条
		http({
			url:'/article/education/list',
			method:'get',
			params: {
				page: page.value,
				limit: limit.value,
				article_title:values.value
				}
		}).then((data)=>{
			console.log(data)
			if (data.code == 0) {
				headlinesData.value=data.data.list
				console.log(headlinesData.value,777);
				
				// tableData.value= data.data.list
				//console.log(tableData)
				// total.value = data.data.totalCount
				//console.log(total.value)
			}
		})	
		//搜索非翔活动
		console.log(values,8881)
		http({
			url:'/activityListByParams',
			method:'get',
			params: {
				page: page.value,
				limit: limit.value,
				title:values.value
				}
		}).then((data)=>{
			console.log(data,888)
			if (data.code == 0) {
				flyData=data.data.list
				console.log(flyData,888);
				
				// tableData.value= data.data.list
				//console.log(tableData)
				// total.value = data.data.totalCount
				//console.log(total.value)
			}
		})	
		//切换组件
		search1Visible.value=false;
		search2Visible.value=true;
}


</script>

<style lang="less" scoped>
	@import url('../../static/iconfont-J/iconfont.css');
	.header{
		display: flex;
		justify-content: center;
		height: 80rpx;
		margin: 42rpx 0;
		line-height: 80rpx;
		.searchBox{
			display: flex;
			align-items: center;
			width: 572rpx;
			height: 80rpx;
			background-color: #f2f2f2;
			border-radius: 40px;
			image{
				width: 36rpx;
				height: 36rpx;
				margin-left: 34rpx;
				margin-right: 36rpx;
			}
			input{
				color: #9a9a9a;
			}
		}
		.searchBtn{
			color: #252525;
			font-size: 26rpx;
			margin-left: 38rpx;
			text-align: center;
		}
	}
	.search1{
		border-bottom: 1px solid #faf9f9;
		padding: 0 42rpx;
		.hot{
			font-size: 26rpx;
			color: #252525;
			margin-bottom: 40rpx;
			margin-top: 22rpx;
			display: flex;
			justify-content: space-between;
			image{
				width: 28rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}
		.smallHotBox{
			display: flex;
			// justify-content: space-between;
			flex-wrap: wrap;
			view{
				margin-bottom: 34rpx;
				padding-right: 40rpx;
				.smallHot{
					height: 48rpx;
					background-color: #f6f8ff;
					font-size: 22rpx;
					color: #0e66fe;
					line-height: 48rpx;
					padding: 12rpx 38rpx;
					border-radius: 50px;
					
				}
			}
		}
	}

</style>
